import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import http from '../../utils/http'
import styles from './index.module.scss'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'

import {
  Form,
  Input,
  Button,
  Toast
} from 'antd-mobile'

function Index() {
  const [visible, setVisible] = useState(false)
  const navigate = useNavigate()
  const onFinish = async (values) => {
    const res = await http.post('/api/login', values)
    console.log(res);

    const { code, message, data } = res.data

    if (code === 200) {
      Toast.show({
        icon: 'success',
        content: message,
        duration: 1000
      })
      localStorage.setItem('token',JSON.stringify(data.token))
      localStorage.setItem('userInfo',JSON.stringify(data.userInfo))
      navigate('/')
    }

  }
  return (
    <div>
      <Form
        layout='horizontal'
        onFinish={onFinish}
        footer={
          <Button block type='submit' color='primary' size='large'>
            登录
          </Button>
        }
      >
        <Form.Header>水平布局表单</Form.Header>
        <Form.Item
          name='username'
          label='邮箱'
          rules={[
            { required: true },
            { type: 'string', min: 6 },
            { type: 'email', warningOnly: true },
          ]}
        >
          <Input placeholder='请输入邮箱' />
        </Form.Item>
        <Form.Item
        className={styles.boxx_wroe}
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
         <div className={styles.password}>
          <Input
            className={styles.input}
            placeholder='请输入密码'
            type={visible ? 'text' : 'password'}
          />
          <div className={styles.eye}>
            {!visible ? (
              <EyeInvisibleOutline onClick={() => setVisible(true)} />
            ) : (
              <EyeOutline onClick={() => setVisible(false)} />
            )}
          </div>
        </div>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
